<template>
  <div>
    <center>
      <el-alert title="Websocket连接测试工具" center class="input-w-700" type="success" effect="dark" :closable="false"></el-alert>
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入地址" class="input-w-700" v-model="domain" clearable>
          <template slot="prepend">ws://</template>
          <el-button slot="append" icon="el-icon-s-promotion" @click="link">连接</el-button>
          <el-button slot="append" icon="el-icon-remove" @click="close">断开连接</el-button>
        </el-input>
      </div>
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入内容" class="input-w-700" v-model="sendData"  @keyup.native.enter="send" clearable>
          <el-button slot="append" icon="el-icon-s-promotion" @click="send" >发送</el-button>
        </el-input>
      </div>
      <el-table :data="messages" class="input-w-700 mt10" :show-header="false">
        <el-table-column>
          <template slot-scope="scope">
            <el-tag :type="scope.row.type">{{scope.row.message}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </center>
  </div>
</template>

<script>
import {push} from "@/utils/zzDouUtils/arrayUtil"
import {speak} from "@/utils/zzDouUtils/audioUtil";

function obj(type,message) {
  return {type:type,message:message};
}
export default {
  data() {
    return {
      domain:'192.168.110.8:8808/connect',
      socket: null,
      messages: [],
      sendData:null
    }
  },
  methods: {
    link(){
      if (this.domain === ''){
        this.$notify.error('请输入地址');
        return;
      }
      if (this.socket){
        this.$notify.error('请先断开已有连接');
        return;
      }
      try{
        // 创建 socket 实例并连接服务器
        this.socket = new WebSocket('ws://' + this.domain);
        // 客户端连接服务端成功
        this.socket.addEventListener('open', (event) => {
          this.messages = [];
          this.$notify.success('连接成功');
          push(this.messages,obj('success','连接成功'))
          console.log(event)
        })
        // 接收服务端发送的消息
        this.socket.addEventListener('message', (event) => {
          this.$notify.success('接收到一条消息');
          push(this.messages,obj('info','服务端：' + event.data))
          console.log(event)
          speak(event.data);

        })
        // 接收服务端发送的消息
        this.socket.addEventListener('close', (event) => {
          this.$notify.error('断开连接');
          push(this.messages,obj('danger','断开连接'))
          this.socket = null;
        })
      }catch (e){
        this.$notify.error('连接失败');
        push(this.messages,obj('danger','连接失败'))
      }
    },
    close(){
      // 关闭 WebSocket 连接
      if (this.socket) {
        this.socket.close()
        this.socket = null;
      }
    },
    send(){
      if (this.socket) {
        if (!this.sendData){
          this.$notify.error('消息不可为空');
          return;
        }
        push(this.messages,obj('info','我：' + this.sendData))
        this.socket.send(this.sendData);
        this.sendData = null;
        this.$notify.success('发送成功');
      }else{
        this.$notify.error('尚未连接');
      }
    }
  },
  created() {},
  beforeDestroy() {
    this.close();
  }
}
</script>
